<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="js/highcharts.js"></script>
	<script src="js/modules/exporting.js"></script>
	<script src="js/highcharts-zh_CN.js"></script>
</head>
<body>
	<div id="container" style="min-width:400px;height:400px"></div>
	<script>
	var bird_ke = [
		"翠鸟科", "鸠鸽科", "秧鸡科", "鸥科", "雉科", "杜鹃科", "??科", "燕科", "长尾山雀科",
		"卷尾科", "鹡鸰科", "鹎科", "黄鹂科", "椋鸟科", "鸫科", "鹟科", "鹟科", "柳莺科", 
		"绣眼鸟科", "山雀科", "雀科", "燕雀科", "鹀科", "伯劳科", "莺鹛科", "戴菊科", "太平鸟科", 
		"鹃鵙科", "树莺科", "鹟科", "隼科", "鹭科", "戴胜科", "鸭科", "鹰科", "鹰科", "雨燕科"
	];
	var bird_mu = [
		"佛法僧目", "鸽形目 ", "鹤形目", "鸻形目", "鸡形目", "鹃形目", "??目", "雀形目 ", "隼形目", 
		"鹈形目", "鹈形目", "犀鸟目", "雁形目", "鹰形目",  "雨燕目"
	];
	var chart = Highcharts.chart('container', {
		chart: {
			type: 'scatter',
			zoomType: 'xy'
		},
		title: {
			text: 'K-means Cluster'
		},
		xAxis: {
			title: {
				enabled: true,
				text: 'Bird_Ke'
			},
			startOnTick: true,
			endOnTick: true,
			showLastLabel: true,
			categories: bird_ke
		},
		yAxis: {
			title: {
				text: 'Bird_Mu'
			},
			categories: bird_mu
		},
		legend: {
			layout: 'vertical',
			align: 'left',
			verticalAlign: 'top',
			x: 100,
			y: 70,
			floating: true,
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
			borderWidth: 1
		},
		plotOptions: {
			scatter: {
				marker: {
					radius: 5,
					states: {
						hover: {
							enabled: true,
							lineColor: 'rgb(100,100,100)'
						}
					}
				},
				states: {
					hover: {
						marker: {
							enabled: false
						}
					}
				}
			}
		},
		tooltip: {
			enabled: true,
			formatter: function () {
				return this.x + `, ${bird_mu[this.y]}`
			}
		},
		series: [{
			name: 'Class 0',
			data: [
				[ 10, 5 ]	
			]
		}, {
			name: 'Class 1',
			data: [
				[ 7, 5 ],
				[ 7, 5 ]
			]
		}, {
			name: 'Class 2',
			data: [
				[ 4, 4 ],
				[ 2, 2 ],
				[ 13, 6 ],
				[ 6, 5 ],
				[ 6, 5 ],
				[ 6, 5 ],
				[ 8, 5 ],
				[ 8, 5 ],
				[ 8, 5 ],
				[ 8, 5 ],
				[ 9, 5 ],
				[ 9, 5 ],
				[ 11, 5 ],
				[ 11, 5 ],
				[ 11, 5 ],
				[ 11, 5 ],
				[ 12, 5 ],
				[ 1, 1 ],
				[ 1, 1 ],
				[ 16, 9 ],
				[ 16, 9 ],
				[ 16, 9 ],
				[ 16, 9 ],
				[ 3, 3 ],
				[ 18, 11 ],
				[ 18, 11 ],
				[ 14, 7 ],
				[ 14, 7 ],
				[ 14, 7 ],
				[ 15, 8 ]
			]
		}, {
			name: 'Class 3',
			data: [
				[ 2, 2 ],
				[ 33, 13 ],
				[ 28, 12 ],
				[ 17, 10 ],
				[ 34, 14 ],
				[ 29, 5 ],
				[ 29, 5 ],
				[ 19, 5 ],
				[ 20, 5 ],
				[ 21, 5 ],
				[ 21, 5 ],
				[ 22, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 23, 5 ],
				[ 24, 5 ],
				[ 24, 5 ],
				[ 24, 5 ],
				[ 24, 5 ],
				[ 25, 5 ],
				[ 25, 5 ],
				[ 11, 5 ],
				[ 11, 5 ],
				[ 30, 5 ],
				[ 30, 5 ],
				[ 30, 5 ],
				[ 30, 5 ],
				[ 30, 5 ],
				[ 35, 5 ],
				[ 31, 5 ],
				[ 32, 5 ],
				[ 26, 5 ],
				[ 32, 5 ],
				[ 24, 5 ],
				[ 27, 5 ],
				[ 23, 5 ]
			]
		}, {
			name: 'Class 4',
			data: [
				[ 5, 5 ]
			]
		}],
		credits: {
			enabled: false
		},
		exporting: {
			enabled: false
		}
});</script>
</body>
</html>